<template>
  <VDialogContent @submit="submit" title="选择常用陪同人员" @close="emit('close')">
    <NScrollbar>
      <div class="content">
        <TableView class="table">

          <template #table="props">
            <NDataTable v-bind="props" :bordered="false" :columns="columns" :data="tableData" :pagination="false"
              :loading="tableLoading" :checked-row-keys="dataListSelections" :row-key="rowKey"
              @update:checked-row-keys="selectionChangeHandle" />
          </template>

          <template #pagination>
            <NPagination :page-sizes="paginationReactive.pageSizes" :item-count="paginationReactive.itemCount"
              :page="paginationReactive.page" :page-size="paginationReactive.pageSize"
              @update:page="paginationReactive.onChange" @update:page-size="paginationReactive.onUpdatePageSize"
              show-size-picker show-quick-jumper :suffix="() => '页'">
              <template #prefix>
                <span style="font-size: 14px;"> 共{{ paginationReactive.itemCount }}条</span>
              </template>
            </NPagination>
          </template>
        </TableView>
      </div>
    </NScrollbar>
  </VDialogContent>
</template>

<script setup lang="ts">
import { NScrollbar, useMessage, NDataTable, NPagination, NButton, NInput, NSpace } from 'naive-ui'
import { sendRequest } from '@/utils/api'
import { ref, reactive, onMounted, h } from 'vue'
import type { DataTableColumns } from 'naive-ui'
import VDialogContent from '@/views/OA/Common/DialogContent.vue'
import TableView from '@/components/TableView.vue'
import { useViewerStore } from '@/views/OA/Common/store'

const props = defineProps({
  customIds: { type: Array },
})
const emit = defineEmits<{
  (event: 'close'): void
  (event: 'update', info: any): void
}>()
const useStore = useViewerStore()
const message = useMessage()

const rowKey: any = (e: any) => e.id || ''
const columns: DataTableColumns = [
  {
    type: 'selection',
  },
  {
    title: '姓名',
    key: 'name',
    width: '100rem',
  },
  {
    title: '单位',
    key: 'phone',
    width: '150rem',
  },
  {
    title: '职位',
    key: 'idCard',
    width: '100rem',
    ellipsis: {
      tooltip: {
        contentStyle: {
          maxWidth: '400rem'
        }
      }
    }
  },
  {
    title: '操作',
    key: 'action',
    align: 'center',
    width: '100rem',
    render: (e: any) => [
      h(
        NButton,
        {
          type: 'primary',
          quaternary: true,
          color: useStore.color['delete'],
          onClick: () => handleDelete(e)
        },
        {
          default: () => '删除'
        }
      ),
    ]
  }
]

const paginationReactive = reactive({
  page: 1,
  pageSize: 10,
  pageSizes: [10, 20, 50, 100, 500],
  itemCount: 0,
  title: null, //标题字段
  onChange: (page: number) => {
    paginationReactive.page = page
    getDispatchList()
  },
  onUpdatePageSize: (pageSize: number) => {
    paginationReactive.pageSize = pageSize
    paginationReactive.page = 1
    getDispatchList()
  }
})

// 获取列表
const tableData: any = ref()
const tableLoading = ref(false)
const dataListSelections: any = ref<DataListSelectionsItem[]>([])
const nameValue: any = ref()

const getDispatchList = async () => {
  tableLoading.value = true
  // dataListSelections.value = []
  const [error, res] = await sendRequest({
    module: 'inout',
    api: 'CustomList',
    override: {
      params: {
        page: paginationReactive.page,
        limit: paginationReactive.pageSize,
        name: nameValue.value
      }
    }
  })
  tableLoading.value = false
  if (error) return message.error(error.message)
  if (res.code !== 0) return message.error(res.msg)
  tableData.value = res.data.list
  paginationReactive.itemCount = res.data.totalCount
}


//多选框勾选
type DataListSelectionsItem = {
  id: string
}
const chosenList: any = ref([])
function selectionChangeHandle(val: any) {
  dataListSelections.value = val
  chosenList.value = []
  tableData.value.map((i: any) => {
    if (val.includes(i.id)) {
      chosenList.value.push(i)
    }
  })
}


//确定
const submit = () => {
  console.log(chosenList.value)
  emit('update', chosenList.value)
  emit('close')
}


//删除
const handleDelete = async (info: any) => {
  console.log(info)
  tableLoading.value = true
  const [error, res] = await sendRequest({
    module: 'inout',
    api: 'CustomDelete',
    override: {
      data: [Number(info.id)]
    }
    // uri: {
    //   ids: [Number(info.id)] as never
    // }
  })
  tableLoading.value = false
  if (error) return message.error(error.message)
  if (res.code !== 0) return message.error(res.msg)
  message.success(res.data)
  await getDispatchList()
}

onMounted(async () => {
  await getDispatchList()
  // const tnp = tableData.value.map((it: any) => {
  //   if (props.customIds?.includes(it.id)) return it
  // })
  selectionChangeHandle(props.customIds)
})

</script>

<style scoped lang="scss">
.content {
  width: 1200rem;
  height: 400rem;
}



@mixin CommonFont {
  font-size: 16rem;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
}

.content::-webkit-scrollbar {
  display: none;
}

:deep(.n-spin-container) {
  width: 100%;
  height: 100%;
}

:deep(.n-scrollbar-container) {
  width: 100%;
  height: 100%;
}

:deep(.n-scrollbar-content) {
  width: 100%;
  height: 100%;
}

:deep(.n-spin-content) {
  width: 100%;
  height: 100%;
}

.draggerBox {
  width: 280rem;
  height: 84rem;
  border-radius: 4rem;
  border: 1rem solid #3d90cc;
  background: transparent;
}

.uploadBox {
  display: flex;
}

:deep(.n-upload-trigger + .n-upload-file-list) {
  width: 530rem !important;
}
</style>